<template>
	<view>
		<nav-bars :bgColor="scrollData >= 200 ? '#fff' : ''" title="装修贷"></nav-bars>
		<view class="gradient_top"></view>
		<view class="IconList" style="">
			<view class="iconItem" style="">
				<view class="Icon" style=""><image src="https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/threshold.png"></image></view>
				<view class="IconText" style="">门槛低</view>
			</view>
			<view class="iconItem" style="">
				<view class="Icon" style=""><image src="https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/speed.png"></image></view>
				<view class="IconText" style="">到账快</view>
			</view>
			<view class="iconItem" style="">
				<view class="Icon" style=""><image src="https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/adopt.png"></image></view>
				<view class="IconText" style="">易通过</view>
			</view>
		</view>
		<view class="selectView" style="">
			<u-divider color="#655746" bg-color="none" fontSize="32" half-width="100" border-color="#655746">请选择贷款类型</u-divider>
			<view class="selectBox" style="">
				<view
					class="selectItem"
					v-for="(item, index) in SelectLabel"
					:style="{ 'border-color': current == index ? '#bb9e64' : '#fff' }"
					:key="index"
					@click="SelectChaenge(item, index)"
				>
					<view class="selectleft" style="">
						<view class="selectImg" style=""><image :src="item.image"></image></view>
						<view class="selectText" style="">{{ item.title }}</view>
					</view>
					<view>
						<label><radio color="#BB9E64" :value="item.checked" :checked="item.checked" /></label>
					</view>
				</view>
			</view>
			<view class="btnView"><view class="btn" @click="goPushMessage">确定</view></view>
		</view>
	</view>
</template>
<script>
export default {
	name: '',
	components: {},
	data() {
		return {
			scrollData: 0,
			SelectLabel: [
				{ title: '建设银行', image: 'https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/blank.png', checked: false },
				{ title: '宇鑫金融', image: 'https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/wallet.png', checked: false }
			],
			current: null
		};
	},
	onLoad(options) {
		this.$utils.getUrl()
	},
	mounted() {},
	methods: {
		goPushMessage() {
			var that = this;
			if(that.current == 0){
				uni.redirectTo({
					url:'/pages_loan/pages/build/Message'
				})
			}else{
				uni.redirectTo({
					url:'/pages_loan/pages/yuxin'
				})
			}
		},
		SelectChaenge(row, index) {
			var that = this;
			var data = that.SelectLabel;
			data.forEach((item, indexs) => {
				if (index == indexs) {
					item.checked = true;
				} else {
					item.checked = false;
				}
			});
			that.current = index;
			// that.isCetificate = row.is;
			// that.SelectLabel = data;
		}
	}
};
</script>
<style lang="scss">
page {
	background: #fff;
}

.gradient_top {
	width: 100%;
	height: 400rpx;
	// position: relative;
	z-index: -1;
	overflow: hidden;
}

.gradient_top::after {
	content: '';
	width: 100%;
	height: 600rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	// border-radius: 0 0 80% 80%;
	// background: linear-gradient(160deg, #1496f1, #e0f0fa);
	background-image: url(https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/loan_bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.IconList {
	height: 200rpx;
	background: #363029;
	margin-top: -50rpx;
	border-radius: 40rpx 40rpx 0px 0px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 32rpx 32rpx 32rpx;
	z-index: 1;
	.iconItem {
		display: flex;
		align-items: center;
		.Icon {
			width: 46rpx;
			height: 46rpx;
			background: rgba(226, 213, 188, 0.25);
			border-radius: 50%;
			// padding: 14rpx 12rpx;
			margin-right: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
		.IconText {
			font-size: 28rpx;
			font-weight: 500;
			color: #e2d5bc;
		}
	}
}
.selectView {
	z-index: 2;
	background: #fff;
	margin-top: -42rpx;
	border-radius: 40rpx 40rpx 0px 0px;
	padding: 88rpx 0 0 0;
	.selectBox {
		margin-top: 66rpx;
		padding: 0 32rpx;
		.selectItem {
			box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(187, 190, 191, 0.2);
			border-radius: 16rpx;
			padding: 38rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 36rpx;
			border: 3rpx solid #fff;
			.selectleft {
				display: flex;
				align-items: center;
				.selectImg {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
				.selectText {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
}
.btnView {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.btn {
		height: 96rpx;
		margin: 0 32rpx;
		background: linear-gradient(216deg, rgba(200, 169, 118, 0.94), rgba(222, 203, 169, 0.94));
		border-radius: 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #402200;
		text-align: center;
		line-height: 96rpx;
	}
}
</style>
